<template>
	<view class="container">
		<u-navbar leftIconColor="#fff"  title="流转记录" placeholder :autoBack="true"></u-navbar>
		<view class="pad-30 centerY betweenX" v-for="(item,index) in list" :key="index">
			<view class="flex-w">
				<view class="font-28 font-w-500 color-white">{{item.nickname}}</view>
				<view class="font-24 mar-top-16 color-grey"> {{$u.timeFormat(item.created_at, 'yyyy-mm-dd hh:MM:ss')}}
				</view>
			</view>
			<view class="font-28 color-white">{{item.io_text}}</view>
		</view>
		<u-empty v-if="list.length == 0" text=" " icon="../../static/image/empty.png"></u-empty>
		<u-loadmore v-if="list.length > 0" :status="pageStatus" color="#9f5ff6" iconColor="#9f5ff6" />
	</view>
</template>

<script>
	// 接口地址
	import {
		codeFlow
	} from '@/config/api.js'
	export default {
		data() {
			return {
				ps: 10,
				page: 1,
				list: [],
				// 加载中状态
				pageStatus: 'loadmore',
				// 后台返回page
				pageData: {}
			}
		},
		onLoad(options) {
			this.codeId = options.codeId;
			this.getList();
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.page = 1;
			this.list = [];
			this.getList();
		},
		// 上拉加载更懂
		onReachBottom() {
			if (this.pageData.next_page_url) {
				this.getList();
			}
		},
		methods: {
			// 流转记录
			getList() {
				this.pageStatus = 'loading';
				let data = {
					ps: this.ps,
					page: this.page,
					code_id: this.codeId
				}
				codeFlow(data).then(res => {
					this.pageStatus = 'loadmore';

					let {
						data
					} = res;
					this.pageData = data;
					this.page = data.current_page + 1;
					this.list = this.list.concat(data.data);

					// 结束下拉刷新
					uni.stopPullDownRefresh();

					// 没有更多了
					if (data.next_page_url == null) {
						this.pageStatus = 'nomore'
					}
				})
			}

		}
	}
</script>

<style scoped lang="scss">
	.container {
		min-height: 100vh;

		::v-deep .u-navbar__content {
			background-image: url('../../static/image/my-bg.png');
			background-size: cover;
			background-repeat: no-repeat;
			background-color: #f5f5f5;
		}
	}
</style>